<template>
  <div class="card-page">
    <tool-bar nav="" :title='action_name + "工作流"'>

    </tool-bar>
    <bpmn-modeler
        ref="refNode"
        :xml="info.xml"
        :users="users"
        :groups="groups"
        :categorys="categorys"
        :is-view="false"
        @save="save_click"
    />
  </div>
</template>

<script>
/**
 * Created by CodeGenerator  at 2021-03-15 10:31:23
 *
 * workflow-bpmn-modeler 是 vue2 组件
 *
 * 相关相由
 *  {
 *         path: '/demo/activiti/add',
 *         meta: {tab: "工作流"},
 *         component: () => import('../view/demo/activiti/wf-card.vue')
 *     }, {
 *         path: '/demo/activiti/edit/:id',
 *         props: true,
 *         meta: {tab: "工作流"},
 *         component: () => import('../view/demo/activiti/wf-card.vue')
 *     },
 */
import bpmnModeler from "workflow-bpmn-modeler";


var bpmn_xml_def = [
  {vue: "xmlns:flowable=\"http://flowable.org/bpmn\" ", db: "xmlns:activiti=\"http://activiti.org/bpmn\" "},
  {
    vue: "targetNamespace=\"http://www.flowable.org/processdef",
    db: "targetNamespace=\"http://www.activiti.org/processdef"
  },
  {vue: "flowable:assignee", db: "activiti:assignee"},
  {vue: "flowable:candidateUsers", db: "activiti:candidateUsers"}
]

export default {
  components: {bpmnModeler},
  data() {
    return {
      wf_host: window.VUE_APP_SERVER_HOST_ACTIVITI,
      info: {}, //子对象需要声明。
      paramId: "",
      users: [
        {name: "闵艺斌", id: "minyb"},
        {name: "孙亮", id: "sunliang"},
        {name: "admin", id: "admin"},
      ],
      groups: [
        {name: "web组", id: "web"},
        {name: "java组", id: "java"},
        {name: "python组", id: "python"},
      ],
      categorys: [
        {name: "OA", id: "oa"},
        {name: "财务", id: "finance"},
      ],
    }
  },
  props: {
    id: {type: String, default: ""},
  },
  computed: {
    action() {
      return this.id ? "edit" : "add";
    },
    action_name() {
      return {add: "添加", edit: "修改"}[this.action]
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {

    loadData() {
      if (!this.id) return;
      this.$http.get(this.wf_host + "/wf/detail?id=" + this.id).then(res => {
        this.info = res.data.data

        var xml = this.info.xml;

        bpmn_xml_def.forEach(it => {
          xml = xml.replaceAll(it.db, it.vue);
        })
        this.info.xml = xml;
      })
    },
    save_click(data) {
      var xml = data.xml;

      bpmn_xml_def.forEach(it => {
        xml = xml.replaceAll(it.vue, it.db);
      })


      this.info.xml = xml;

      jv.prompt("输入工作流分类", "分类", {inputValue: this.info.category}).then(category => {
        if (!category.value) return;
        this.info.category = category.value;

        jv.prompt("输入工作流名称", "名称", {inputValue: this.info.name}).then(name => {
          if (!name.value) return;
          this.info.name = name.value;

          var json = {
            name: this.info.name,
            category: this.info.category,
            deployId: this.id,
            loginName: localStorage.getJson("login-user").loginName
          };

          this.$http.post(this.wf_host + "/wf/save?" + jv.param(json), this.info.xml).then(res => {
            //[axios拦截器中已处理了异常]。
            jv.info(this.action_name + " 成功");
            if (this.action == "add") {
              this.$router.push("/demo/activiti/list")
              this.$router.push("/demo/activiti/list")
            } else if (this.action == "edit") {
              this.$router.push("/demo/activiti/list")
            }
          })
        });
      })
    }
  }
}
</script>
